<script src="resource/js/webuploader.min.js"></script>
<script src="resource/js/diyUpload.js"></script>
<script src="resource/js/jquery.raty.js"></script>
<style>
    .footer.footer-home {display: none;}
    .star_on{color:#e68545 }
    .upload{padding:4%;/* border-bottom:1px solid #e6e6e6; */}
    .uploadImg{overflow:hidden;}
    .uploadImg label{display:inline-block;width:3.1rem;height:3.1rem;line-height:3.1rem;text-align:center;border:1px #3facef solid;overflow:hidden;position:relative;font-size:4rem;color:#3facef;margin-right:10px;cursor:pointer;font-weight: 100 !important;float: left;}
    .uploadImg label img{position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto;width:100%;height:100%;z-index:1;cursor:default;}
    .uploadImg label input[type="file"]{display:none;}
    .uploadImg label .del{position:absolute;right:0;top:0;background-color: rgba(0,0,0,0.6);font-size:1rem;line-height:normal;color:white;z-index:2;padding:2px;cursor:pointer;font-size: .6rem;}
</style>
<header>
    <a href="javascript:history.back();">
        <i class="iconfont icon-xialalan-copy"></i>
    </a>
    <span>发表评论</span>
</header>
<form id="comment_form" action=""  method="post" >
<div class="ass_box margin_bot">

    <div class="ass_box_list de_title_bottom">
        <span>整体评分</span>
        <ul class="star">
            <li data-score="1"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="2"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="3"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="4"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="5"  class="star_on iconfont icon-yduixingxingshixin"></li>
        </ul>
        <input type="hidden" name="all_pint" id="all_pint" value="5">
    </div>
    <div class="ass_box_list_1">
        <span>服务</span>
        <ul class="star">
            <li  data-score="1" class="star_on iconfont icon-yduixingxingshixin"></li>
            <li  data-score="2" class="star_on iconfont icon-yduixingxingshixin"></li>
            <li  data-score="3" class="star_on iconfont icon-yduixingxingshixin"></li>
            <li  data-score="4" class="star_on iconfont icon-yduixingxingshixin"></li>
            <li  data-score="5" class="star_on iconfont icon-yduixingxingshixin"></li>
        </ul>
        <input type="hidden" name="serve_point" id="serve_point" value="5">
    </div>
    <div class="ass_box_list_1">
        <span>位置</span>
        <ul class="star">
            <li data-score="1"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="2"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="3"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="4"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="5"  class="star_on iconfont icon-yduixingxingshixin"></li>
        </ul>
        <input type="hidden" name="place_point" id="place_point" value="5">
    </div>
    <div class="ass_box_list_1">
        <span>设施</span>
        <ul class="star">
            <li data-score="1"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="2"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="3"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="4"  class="star_on iconfont icon-yduixingxingshixin"></li>
            <li data-score="5"  class="star_on iconfont icon-yduixingxingshixin"></li>
        </ul>
        <input type="hidden" name="facility_point" id="facility_point" value="5">
    </div>
</div>
<div class="ass_box">
    <div class="ass_box_list de_title_bottom">
        <span>点评</span>
    </div>
    <textarea cols="10" rows="20" class="text_area" name="content" placeholder="亲，服务、餐饮、交通满意吗？发点图文点评吧~"></textarea>
</div>
<div class="ass_box_list footer_bottom">
    <ul class="upload-ul clearfix">
        <!--<li class="upload-pick">
            <div class="webuploader-container clearfix" id="goodsUpload"></div>
        </li>-->
        <div class="uploadImg fl">
            <label class="result"><input type="file" />+</label>
        </div>
    </ul>
</div>
    <input type="hidden" name="order_id" value="<?php echo $output['order_info']['order_id']; ?>">
    <input type="hidden" name="form_submit" value="ok">
    <a class="btn footer_1" id="sub_but" href="javascript:;">
    发布
</a>
</form>
<script>
    var commentForm = $("#comment_form");
    $(function(){
        $("#sub_but").click(function(){
            var _html="";
            $(".upload-img").each(function(){
                _html+="<input type='hidden' name='imgs[]' value='"+$(this).attr('src')+"'>";
            });
            $(this).parent().append(_html);
            /*$.ajax({
                url: window.location.href,
                type: 'POST',
                data: commentForm.serialize(),
                dataType: 'json',
                async: false,
                success: function (data, textStatus, jqXHR) {
                    if (data.errcode == 0) {
                        popAlert('评价成功',function(){

                        })
                    } else {
                        $('.mask_1').hide();
                        popAlert(data.errmsg, function () {
                            paying = false;
                        });
                    }
                },
            });*/
            commentForm.submit();
        })
    });
    $(".star li").click(function () {
        var index=$(this).index()+1;
        var score=$(this).attr("data-score");
        $(this).parent(".star").next("input").val(score);
        $(this).prevAll().css("color","#e68545");
        $(this).nextAll().css("color","#999999")
        $(this).css("color","#e68545");
    });

    //上传图片
    var uploadImgMinNum = 1;
    var uploadImgMaxNum = 3;
    var showImg = document.querySelector(".uploadImg label");
    var getImg = document.querySelector(".uploadImg input[type='file']");
    if(typeof FileReader === 'undefined') {
        showImg.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        getImg.setAttribute('disabled', 'disabled');
    } else {
        getImg.addEventListener('change', readFile, false);
    }

    function readFile() {
        var _self = this;
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)) {
            alert("请上传图片！");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            $(_self).parent().html('<img class="upload-img" src="' + this.result + '"/><span class="del iconfont" title="\u5220\u9664">X</span>');
            $(".uploadImg .del").unbind("click");
            $(".uploadImg .del").click(function() {
                $(this).parent().remove();
                uploadImgMinNum--;
                var img = $(".uploadImg input[type='file']");
                if(img.length == 0) {
                    $(".uploadImg").append("<label class='result'><input type='file'>+</label>");
                    document.querySelector(".uploadImg input[type='file']").addEventListener('change', readFile, false);
                    uploadImgMinNum++;
                }
            });
            if(uploadImgMinNum < uploadImgMaxNum) {
                $(".uploadImg").append("<label class='result'><input type='file'>+</label>");
                document.querySelector(".uploadImg input[type='file']").addEventListener('change', readFile, false);
                uploadImgMinNum++;
            }
        };
    }
</script>